<template>
    <!-- 产品添加 -->
     <p style="font-weight: 800;margin-left: 300px;">产品添加</p>
     <br/>
     <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
    >
    <el-form-item label="标识：" prop="pCharacteristic">
      <el-input v-model="ruleForm.pCharacteristic" />
    </el-form-item>
    <el-form-item label="产品编号：" prop="pNumber">
      <el-input v-model="ruleForm.pNumber" />
    </el-form-item>
    <el-form-item label="产品名称：" prop="pName">
      <el-input v-model="ruleForm.pName" />
    </el-form-item>
    <el-form-item label="所属类别：" prop="productTypeId">
      <el-select v-model="ruleForm.productTypeId" placeholder="请选择所属类别" clearable >
        <el-option v-for="item in Types" :key="item.productTypeId" :label="item.ptClass" :value="item.productTypeId" />
      </el-select>
    </el-form-item>
    <el-form-item label="规格型号：" prop="pSpec">
      <el-input v-model="ruleForm.pSpec" />
    </el-form-item>
    <el-form-item label="单位：" prop="pUnit">
      <el-input v-model="ruleForm.pUnit" />
    </el-form-item>

    <el-form-item label=" ">
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        添加
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>

    
    </el-form>
</template>
    
<script setup lang='ts'>
import axios from 'axios';
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter();
import http from '../../http.js'

import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const locationOptions = ['Home', 'Company', 'School']

const ruleForm = reactive({
    pCharacteristic: '',//标识
    pNumber: '',//产品编号
    pName: '',//产品名称
    pSpec: '',//规格型号
    pUnit: '',//单位
    productTypeId: '',//产品分类ID
    addName: 'lf',
    addTime: '2024-12-16',
    office_Id: '11',
    user_Id:1
})
const rules = reactive<FormRules>({
    pCharacteristic: [
        { required: true, message: '标识不能为空', trigger: 'blur' },
    ],
    pNumber: [
        { required: true, message: '产品编号不能为空', trigger: 'blur' },
    ],
    pName: [
        { required: true, message: '产品名称不能为空', trigger: 'blur' },
    ],
    pSpec: [
        { required: true, message: '规格型号不能为空', trigger: 'blur' },
    ],
    pUnit: [
        { required: true, message: '单位不能为空', trigger: 'blur' },
    ],
    productTypeId: [
        { required: true, message: '所属类别不能为空', trigger: 'blur' },
    ],
})

onMounted(() => {
    GetProductType();//显示产品分类下拉框
})

//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        axios.post(http.zblnb+'/erpcp/api/Product/ProductAdd',ruleForm)
        .then(res => {
            if (res.data.data > 0) {
                ElMessage.success('添加成功');
                router.push('/ShowProduct')
            }   
            else {
                ElMessage.error('添加失败')
                return
            } 
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//获取产品分类
///////////////需要调用zbl写的产品分类网关///////////////
const Types=ref([])
const GetProductType = () => {
    axios.get(http.zblnb+'/erpcp/api/ProductType/ProductTypeSet')
    .then(res => {
        Types.value = res.data.data
    })
    .catch(err => {
        console.log(err)    
    })
}

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
    
</script>
    
<style>
    
</style>